<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>挂单记录</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <!-- 头部搜索 -->
      <el-row :gutter="10">
        <el-col :span="5">
          <div class="grid-content bg-purple">
            <el-form label-width="120px">
              <el-form-item label="卖家手机号">
                <el-input
                  v-model="queryinfo.sellerUserTel"
                  clearable
                  placeholder="请输入手机号"
                  @clear="getmsgList"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple">
            <el-form label-width="120px">
              <el-form-item label="买家手机号：">
                <el-input
                  v-model="queryinfo.buyerUserTel"
                  clearable
                  placeholder="请输入手机号"
                  @clear="getmsgList"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-button type="primary" icon="el-icon-search" @click="getmsgList"
          >搜索</el-button
        >
      </el-row>
      <!-- 数据列表 -->
      <el-table :data="tableData" stripe border style="width: 100%"> 
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="id" label="ID" width="80"> </el-table-column>
        <!-- <el-table-column prop="buyerUserNickName" label="买家昵称"> </el-table-column> clinchTime -->
        <el-table-column prop="sellerUserTel" label="卖家手机号"> </el-table-column>
        <el-table-column prop="sellerUserEmail" label="卖家邮箱"> </el-table-column>
        <el-table-column prop="accNum" label="挂卖数量ACC"> </el-table-column>
        <el-table-column prop="usdtPrice" label="单价USDT">
        </el-table-column>
        <el-table-column prop="isRedeem" label="是否成交">
          <template slot-scope="scope">
            <span v-if="scope.row.isRedeem ==1">挂卖中</span>
            <span v-else-if="scope.row.isRedeem ==2">成交</span>
            <span v-else>下架</span>
          </template>
        </el-table-column>
        <el-table-column prop="buyerUserTel" label="买家手机号"> </el-table-column>
        <el-table-column prop="buyerUserEmail" label="买家邮箱"> </el-table-column>
        <el-table-column prop="usdtSum" label="总金额"> </el-table-column>
        <el-table-column prop="clinchTime" label="交易时间"> </el-table-column>
        <!-- <el-table-column label="收益详情">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-view"
              @click="LookIP(scope.row.id, 1)"
              >查看</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30]"
        :page-size="queryinfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 收益详情-->
    <el-dialog title="收益详情" :visible.sync="dialogTableVisible">
      <el-table :data="gridData" border :inline="true">
        <!-- <el-table-column property="createTime" label="时间"></el-table-column> -->
        <el-table-column property="sl" label="算力"></el-table-column>
        <el-table-column property="type" label="类型"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryinfo: {
        sellerUserTel: "",
        buyerUserTel: "",
        pageIndex: 1,
        pageSize: 10,
      },
      total: 0,
      tableData: [],
      dialogTableVisible: false,
      gridData: [],
      gridData1: [],
    };
  },
  created() {
    this.getmsgList();
  },
  methods: {
    // 查看IPOC记录 查看IPFS记录
    async LookIP(id, type) {
      const query = {
        id,
        type,
      };
      const { data: res } = await this.$http.post(
        "currencyAudit/getSlRecords",
        this.httputil(query)
      );
      if (res.code !== 200) return this.$message.error(res.msg);
      this.gridData = res.data.slRecords;
      this.dialogTableVisible = true;
    },
    
    // 获取收益记录列表
    async getmsgList() {
      const { data: res } = await this.$http.post(
        "currencyAudit/getGmGoodsOrderList",
        this.httputil(this.queryinfo)
      );
      if (res.code !== 200) return this.$message.error(res.msg);
      this.tableData = res.data.list;
      this.total = res.data.count;
    },
    // 页面数量发生改变
    handleSizeChange(newSize) {
      this.queryinfo.pageSize = newSize;
      this.getmsgList();
    },
    // 页数发生改变
    handleCurrentChange(newCurrent) {
      this.queryinfo.pageIndex = newCurrent;
      this.getmsgList();
    },
  },
};
</script>
